<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .clearfix:after{
            display: table;
            clear: both;
            content: "";
        }
        .fl{
            float: left;
        }
        .all{
            width: 800px;
            height: 600px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .left{
            width: 75%;
            height: 100%;

        }
        .right{
            width: 25%;
            height: 100%;
            background-color: pink;
            border-left: 1px solid #ccc;
            box-sizing: border-box;
            overflow: auto;
        }
        .fre{
            width: 100%;
            height: 75%;
            border-bottom: 1px solid #ccc;
            overflow: auto;

        }
        .dre{
            width: 100%;
            height: 25%;
        }
        .a{
            width: 85%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
            outline: none;
        }
        .b{
            width: 15%;
            height: 100%;
            border-left:1px solid #ccc;
            box-sizing: border-box;
            text-align: center;
            line-height: 150px;
            cursor: pointer;
        }
        .student{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            background-color: white;
            text-align: center;
        }
        .msg{
            background: white;
            height: 30px;
            line-height: 30px;
            padding: 10px;

        }
    </style>
</head>
<body>
<h3 id="h3" style="text-align: center"></h3>
<div class="all clearfix">
    <div class="left fl">
        <div class="fre" id="cnt"></div>
        <div class="dre clearfix" >
            <div class="a fl" id="msg" contenteditable="true"></div>
            <div class="b fl" id="sendbtn">发送</div>
        </div>
    </div>
    <div class="right fl" id="students"></div>
</div>
<script src="jquery.js"></script>
<script>
    if(!localStorage.userInfo){
        location="login.html";
    }
    var userInfo=JSON.parse(localStorage.userInfo);
    h3.innerHTML="欢迎您，"+userInfo.name;
    $.get("https://java60.hfbdqn.cn/find_all_student",{},
        function (data) {
        for(var i=0;i<data.length;i++){
            var d=data[i];
            var newDiv=document.createElement("div");
            newDiv.innerHTML=d.name+"(在线)";
            newDiv.className="student";
            students.appendChild(newDiv);
        }
    });
    sendbtn.onclick=function () {
        $.post("https://java60.hfbdqn.cn/addChatMsg",
            {content:msg.innerHTML,token:userInfo.token},function (data) {
                var msgInfo=data;
                console.log(msgInfo);
                msg.innerHTML="";
                loadData();
            });
    };
    function loadData() {
        cnt.innerHTML="";
        var divs=students.getElementsByTagName("div");
        $.get("https://java60.hfbdqn.cn/find_all_chat_msg",{},function(mdata) {
            mdata=mdata.reverse();
            for (let i=0;i<mdata.length;i++){
                var m=mdata[i];
                var msgDiv=document.createElement("div");
                msgDiv.className="msg";
                msgDiv.innerHTML=m.wechatStudent.name+":"+m.content;
                for(let j=0;j<divs.length;j++){
                    if(divs[j].innerHTML.indexOf(m.wechatStudent.name)!=-1){
                        divs[j].style.color="red";
                    }
                }
                cnt.appendChild(msgDiv);
            }
        })
    }
    setInterval(loadData,3000)
</script>
<script>
    window.onload=function () {
        $.get("https://java60.hfbdqn.cn/visittest",{text:"onload"},function () {

        })
    };
    window.onbeforeunload=function () {
        $.get("https://java60.hfbdqn.cn/visittest",{text:"onbeforeunload"},function () {

        })
    };
    window.onvisibilitychange=function () {
        $.get("https://java60.hfbdqn.cn/visittest",{text:document.visibilityState},function () {

        })
    };
</script>
</body>
</html>